<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scale">
    <title>模态框插件</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>

    </style>
</head>
<body style="margin: 100px;">
<!--模态框声明-->
<div class="modal fade" id="myModal" tabindex="-1">
    <!--窗口声明-->
    <div class="modal-dialog modal-lg">
        <!--内容声明-->
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">会员登陆</h4>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4">1</div>
                        <div class="col-md-4">2</div>
                        <div class="col-md-4">3</div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default">注册</button>
                <button class="btn btn-primary">登陆</button>
            </div>
        </div>
    </div>
</div>

<button class="btn btn-primary bg-lg" id="btn" data-toggle="modal" data-target="#myModal" data-backdrop="static" ><!--href="lesson13-c.html"-->点击弹窗</button>

<script>
    /*
    $('#btn').on('click',function(){
        $('#myModal').modal('show');
    });
    */

    $('#myModal').modal({
        show:false,
        remote:'lesson13-c.html'
    });

    $('#myModal').on('show.bs.modal',function(){
        alert('当调用show方法时立即触发');
    });

    $('#myModal').on('shown.bs.modal',function(){
        alert('当弹窗完全出现！再执行');
    });

    $('#myModal').on('hide.bs.modal',function(){
        alert('当调用hide方法时立即触发');
    });

    $('#myModal').on('hidden.bs.modal',function(){
        alert('当模态框完全关闭后触发');
    });

    $('#myModal').on('loaded.bs.modal',function(){
        alert('当远程加载后触发！');
    });
</script>


</body>
</html>